<template>
	<view>
		<view class="box">
			<!-- 文字输入框 -->
			<view class="content">
				<textarea class="row-textarea" value="" placeholder="来分享本次购物体验吧 , 2-256字..." placeholder-style="color:#bfbfbf;"
				 @input="descInput" maxlength="256" v-model="content"></textarea>
				<view class="text-num">{{remnant}}/256</view>
			</view>
			<!-- 上传图片 -->
			<view class="up-pic">
				<view class="up-pic-text">
					添加照片
				</view>

				<view class="up_pict_box">
					<view class="everbox" v-for="(item,index) in imgbox" :key="index">
						<view class="everpic">
							<image :src="item" style="width: 200upx; height: 200upx;" mode=""></image>
						</view>
						<!-- 右上角的红叉 -->
						<view class="redx" @tap="delateimg(index)">
							<image src="../../static/home/hongx.png" style="width: 36upx;height: 36upx;"></image>
						</view>
					</view>

					<view v-show="imgbox.length<6" class="everbox" @tap="upimg">
						<view class="everpic">
							<image src="../../static/home/uppic.png" style="width: 200upx; height: 200upx;" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>



			<!-- 给设计师评价 -->
			<view class="evaluate-box">
				<view class="evaluate-title">
					给设计师评价
				</view>
				<!-- 评价 -->
				<view class="choose-box">
					<view class="choose-text">
						评价
					</view>
					<view class="choose-star">
						<u-rate active-color="#FFBA4B" inactive-color="#FFBA4B" size="36" :count="count" v-model="value"></u-rate>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="xian"></view>
				<!-- 评价 -->
				<view class="choose-boxs">
					<view class="choose-text">
						评语
					</view>
					<view class="choose-star">
						<textarea class="input-box" name="" v-model="comment" placeholder="请输入 , 30字以内" maxlength="30" cols="30" rows="10"></textarea>
					</view>
				</view>
			</view>
			<!-- 确认按钮 -->
			<view class="ok-but" @tap="subevaluate">
				提交
			</view>
			<view style="height: 50upx;">

			</view>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/common/utils/index';
	import {
		UploadImage
	} from '@/common/utils/index';
	import {
		UPLOAD_IMAGE_URL
	} from '@/common/config.js';
	var _self;


import uRate from "@/uview-ui/components/u-rate/u-rate.vue"
	export default {
		components: {
			uRate,
		},
		data() {
			return {
				content: '', //
				remnant: 0, //
				value: 0, //
				count: 5, //

				id: '', //订单号
				comment: '', //给设计师评语


				types: [],
				active: 1,
				imgpath: [],
				body: '',
				imgbox: [], //本地图片地址
				imgid: [], //图片网上id
				send: false, //默认为false
				remnant: 0,
				lodingone: false, //加载中

				index: '', //下标
			};
		},
		onLoad(e) {
			this.id = e.order_sn;
			this.index = e.index;
		},
		methods: {
			descInput: function(e) {
				// console.log(e.detail.value)
				this.remnant = this.content.length
			},
			//删除图片
			delateimg(index) {
				console.log(index)
				this.imgbox.splice(index, 1);
				this.imgid.splice(index, 1);
			},
			//上传图片
			upimg() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.imgbox.push(tempFilePaths[0]);
						uni.uploadFile({
							url: global.UPLOAD_IMAGE_URL, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								console.log(1)
								this.imgid.push(JSON.parse(uploadFileRes.data).data[0].id)
							},
							fail: (err) => {
								console.log(2)
								console.log(err)
							},
						});
					}
				});
			},
			//提交评价
			subevaluate() {
				let _this = this;
				if (this.content.length < 2) {
					this.$message.info('最少输入两个字以上的评价哦');
				} else if (this.value < 1) {
					this.$message.info('给设计师小哥哥小姐姐们打个分嘛');
				} else if (this.comment == '') {
					this.$message.info('给设计师小哥哥小姐姐们写个评语吧');
				} else {
					if (this.imgbox.length != this.imgid.length) {
						this.$message.info('图片正在上传中稍等一下吧');
					} else {

						if (_this.send == false) {
							_this.send = true;
							this.$api.post(global.apiUrls.subevaluate, {
									order_sn: this.id,
									images: this.imgid.toString(),
									content: this.content,
									level: this.value,
									comment: this.comment,
								})
								.then(res => {
									if (res.data.code == 1) {
										this.$message.info('提交成功');
										uni.navigateBack({
											delta: 2,
										});
										_this.send = false;
									} else {
										this.$message.info(res.data.msg);
										_this.send = false;
									}
								}).catch(err => {
									console.log(res)
									_this.send = false;
								})
						}
					}


				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F7F9;
	}

	.xian {
		width: 100%;
		border-bottom: 1rpx solid #EDEDED;
	}

	.up_pict_box {
		// padding: 0 -40upx;
		// background-color: #0081FF;
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.everbox {
			position: relative;

			.everpic {
				margin-top: 32upx;
				margin-right: 24upx;
				width: 200upx;
				height: 200upx;
				border-radius: 24upx;
				overflow: hidden;
			}

			.redx {
				width: 36upx;
				height: 36upx;
				position: absolute;
				top: 15upx;
				right: -3upx;
			}
		}

		// justify-content: space-between;

	}

	.box {
		.content {
			background-color: #FFFFFF;
			width: 100%;
			height: 380upx;
			padding: 32upx;

			.row-textarea {
				width: 100%;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 46upx;
			}

			.text-num {
				text-align: right;
				color: #999999;
				font-size: 22upx;
			}
		}

		.up-pic {
			margin-top: 16upx;
			padding: 32upx;
			background-color: #FFFFFF;

			.up-pic-text {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 56upx;
				color: #333333;
			}

			.up-pic-box {
				display: flex;

				.pic-box-z {
					width: 180upx;
					height: 180upx;
					position: relative;
					background-image: url(../../static/my/addpic.png);
					background-size: 100% 100%;
					margin-left: 32upx;
					margin-top: 24upx;

					.every-box {
						width: 180upx;
						height: 180upx;
						border-radius: 24upx;
						overflow: hidden;
						margin-top: 24upx;

					}

					.hongx {
						width: 38upx;
						height: 38upx;
						position: absolute;
						top: -10upx;
						right: -10upx;
					}
				}

			}
		}

		// 给设计师评价
		.evaluate-box {
			margin-top: 16upx;
			padding: 32upx;
			background-color: #FFFFFF;

			.evaluate-title {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.choose-box {
				display: flex;
				align-items: center;
				height: 88upx;

				.choose-text {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.choose-star {
					margin-left: 40upx;
				}
			}

			.choose-boxs {
				display: flex;
				margin-top: 28upx;

				.choose-text {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 50upx;
					color: #000000;
				}

				.choose-star {
					margin-left: 40upx;

					.input-box {
						width: 550upx;
						height: 100upx;
						// background-color: #0081FF;

						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 50upx;
					}
				}
			}
		}

		//确认按钮
		.ok-but {
			margin-left: 32upx;
			width: 686upx;
			height: 88upx;
			background: #FFBA4B;
			opacity: 1;
			border-radius: 42upx;
			text-align: center;
			line-height: 88upx;
			color: #FFFFFF;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-top: 123upx;
		}
	}
</style>
